<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>01_HelloWorld</title>
	</head>

	<body>
		<!--
      1. 引入Vue.js
        怎么引入vue.js？
          - 在html文件中：在cdn上找到对应js文件，下载下来，使用 vue.js
          - 在脚手架中：npm下载，import引入
      2. 创建Vue对象
        el : 指定根element(选择器)
        data : 初始化数据(页面可以访问)
      3. 双向数据绑定 : v-model
      4. 显示数据 : {{xxx}}
      5. 理解vue的mvvm实现
    -->
	</body>
	<!-- 2. 准备DOM容器 -->
	<!-- 模板页面：要选渲染vue的数据, 必须使用模板语法 {{}} - 插值语法 -->
	<div id="app">
		<p>{{msg}}</p>
		<button @click="msg += '~'">按钮</button>
	</div>
	<!-- 
  可以被vue解析吗？不会 
  要想被vue解析，必须写在根标签内部
-->
	<p>{{yyy}}</p>
	<!-- 
  1. 引入vue.js: 
    一旦引入vue.js全局就会多一个Vue：构造函数
      在js命名习惯中：首字母大写的一般都是构造函数
-->
	<script src="../js/vue.js"></script>
	<script>
		// import vue from 'vue' // 浏览器不识别es6模块化语法

		// 功能：将js中的数据渲染到页面p标签内部
		new Vue({
			// 配置对象
			// 什么是配置对象？对象中的属性名是固定的（一旦写错单词，功能不会生效）
			// 在哪里还见过配置对象？webpack、axios

			// el: element元素，vue找到这个元素（根元素、根标签），解析里面所有内容
			// 说明内部是通过document.querySelector获取DOM元素的
			el: "#app",

			// data: 数据，放置要渲染到页面上的数据
			data: {
				// 里面数据数量和名称都是任意的
				msg: "hello world",
				yyy: "111",
				// zzz: '111'
			},
		});
	</script>
</html>
